<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>单词学习</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="fly,layui,前端社区">
    <meta name="description" content="Fly社区是模块化前端UI框架Layui的官网社区，致力于为web开发提供强劲动力">
    <link rel="stylesheet" th:href="@{/res/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/res/css/global.css}">
    <link rel="stylesheet" th:href="@{/bootstrap/bootstrap.min.css}">
    <style>
        li.list-group-item:hover {background: #BBBBBB; cursor:pointer;}
        .selected-word {background: #BBBBBB;}
        .study-word {background: rgb(99,186,121)}
    </style>
</head>
<body>
<div th:replace="/common/header::header-div"></div>

<div class="container-fluid" style="background-color: rgb(242,242,242)">
    <div id="type" style="display: none" th:text="${wordType}"></div>
    <div class="row">
        <div class="col-md-3" style="margin:20px 80px">
            <a class="list-group-item active">单词列表<button style="margin-left: 20px" type="button" onClick="changeGroup()" class="layui-btn layui-btn-danger">换一组</button></a>
            <ul class="list-group" style="overflow: auto; height: 400px">
                <li class="list-group-item" onClick="changeWord(this)" th:each="word:${wordList}" th:text="${word.english}+'----'+${word.chinese}">english 中文</li>
            </ul>
            <a class="list-group-item active"> </a>
        </div>
        <div class="col-md-6">
            <div class="thumbnail" style="background:rgba(255,255,255,0.6); margin: 20px 50px;height: 475px">
                <div style="margin: 10px 20px;">
                    <p>
                    <h1 style="margin-bottom: 80px">『</h1>
                    <p id="english" align="center" style="font-size: 50px"></p>
                    <p id="chinese" align="center"></p>
                    <h1 style="margin-top: 80px" align="right">』</h1>
                    </p>
                </div>
                <p align="center">
                    <button type="button" onClick="preWord()" class="layui-btn layui-btn-normal"><i class="layui-icon"></i></button>
                    <audio id="m_aud"></audio>
                    <img src="/res/images/play.png" id="m_playpause" />
                    <button type="button" onClick="nextWord()" class="layui-btn layui-btn-normal"><i class="layui-icon"></i></button>
                    <button type="button" onClick="learn()" class="layui-btn layui-btn-radius">认识</button>
                </p>
            </div>
        </div>
    </div>
</div>

<div th:replace="/common/translate::translate-div"></div>

<script th:src="@{/res/layui/layui.js}"></script>
<script>
    layui.use(['form', 'jquery', 'layer','flow'], function () {
        const $ = layui.jquery;

        $("#talk").removeClass("layui-this");
        $("#learn").addClass("layui-this");
        $("#exam").removeClass("layui-this");

        window.translation = function (that) {
            let word = $(that).parent().prev().children().val() ;
            if(word == "" ) return;
            $.ajax({
                url:'/learn/word/one/' + word,
                dataType:"json",
                type:'get',
                success:function(data){
                    if(data.success){
                        let english = data.data.english;
                        let chinese = data.data.chinese;
                        $("#english").html(english);
                        $("#chinese").html(chinese);
                        layer.open({
                            type: 1,
                            title: '单词信息',
                            content: $('#tr')//这里content是一个普通的String
                        });
                    }else{
                        layer.msg("单词不存在")
                        return;
                    }
                }
            });
        };

        let word = null;

        window.changeWord = function (that) {
            $(".list-group-item").removeClass("selected-word");
            $(that).addClass("selected-word");
            $("#english").html($(that).html().toString().split("----")[0]);
            $("#chinese").html($(that).html().toString().split("----")[1]);
            $("#m_aud").attr("src","http://media.shanbay.com/audio/us/"+ $(that).html().toString().split("----")[0] +".mp3");
            word = that;
        };

        window.preWord = function () {
            let preWord = $(word).prev();
            if(preWord != null) changeWord(preWord);
        };

        window.nextWord = function () {
            let nextWord = $(word).next();
            if(nextWord != null) changeWord(nextWord);
        };

        window.learn = function () {
            $.ajax({
                url:'/learn/word/' + $("#type").html() + '/' + $(word).html().toString().split("----")[0],
                contentType: "application/json",
                dataType:'json',
                type:'post',
                success:function(data){
                    if (data.success) {
                        $(word).addClass("study-word");
                        nextWord();
                    }else {

                    }
                }
            });
        };

        window.changeGroup = function () {
            $.ajax({
                url:'/learn/word/change/'  + $("#type").html(),
                contentType: "application/json",
                dataType:'json',
                type:'post',
                success:function(data){
                    if (data.success) {
                       window.location.reload();
               ``     }else {

                    }
                }
            });
        };

        $("#m_playpause").click(function() {
            if ($("#m_aud")[0].paused) {
                $("#m_aud")[0].play();
            } else {
                $("#m_aud")[0].pause();
            }
        });
        $("#m_aud")[0].addEventListener("play", function (e) {
            $("#m_playpause").attr("src","/res/images/pause.png");
        }, false);
        $("#m_aud")[0].addEventListener("pause", function (e) {
            $("#m_playpause").attr("src","/res/images/play.png");
        }, false);

    });

</script>

</body>
</html>